import * as YvanUI from "yvan-ui-wotu"
import CustomDict from '../widget/custom.dict'
import * as CustomService from '@server/example/CustomService'

var toJS = YvanUI.mobx.toJS

const React = YvanUI.React
const _ = YvanUI.lodash

interface Ref {
    grid1: YvanUI.Grid
}

let flag = false

export default class GridEdit extends YvanUI.Scope<void, Ref> {

    main = this.$$({
        check1: '',
        bindSelected: '',
        gridChecked: []
    })

    onRender() {

        this.watch(()=>this.main.check1,
            (v)=> {
                this.refs.grid1.loading = (v === '1')
            });
    }

    vjson = this.$$({
        view: 'page',
        title: '表格排序',
        toolbar:[
            {
                view: 'button',
                text: '设置数据',
                icon: 'fa fa-refresh',
                type: 'primary',
                onClick: () => {
                    flag = !flag

                    this.refs.grid1.forEachData((row) => {
                        row.industry_class = (flag ? '1' : '2')
                    })
                }
            },
        ],
        items: [
            {
                view: 'card',
                bodyStyle: {
                    padding: 0
                },
                items: [
                    {
                        view: 'grid',
                        title: '表格排序',
                        ref: 'grid1',
                        bindSelected: 'main.bindSelected',
                        idField: "customer_id",
                        toolbar: [
                            {
                                view: 'button',
                                text: '刷新',
                                icon: 'fa fa-refresh',
                                onClick: () => {
                                    this.refs.grid1.refresh()
                                }
                            },
                            {
                                view: 'button',
                                text: '打印当行',
                                icon: 'fa fa-refresh',
                                onClick: () => {
                                    console.log(toJS(this.main.bindSelected))
                                }
                            },
                        ],
                        columns: [
                            {field: "customer_id", hidden: true},
                            {
                                view: 'checkbox',
                                title: '勾选',
                                bind: 'main.gridChecked',
                                checkboxDisabled: (param: YvanUI.IGridCellRenderParam) => {
                                    return param.data.industry_class === '2'
                                },
                                onCheckboxChange: (param: YvanUI.IGridCellRenderParam) => {
                                    console.log(param)
                                }
                            },
                            {field: "customer_code", title: "客户编号", width: 80,},
                            {field: "customer_name", title: "客户名称", width: 120},
                            {field: "logogram", title: "助记码", width: 80},
                            {
                                field: "industry_class",
                                title: "客户类型",
                                width: 100,
                                editable: true,
                                editMode: 'select',
                                data: CustomDict.industryclass
                            },
                            {
                                field: "customer_type",
                                title: "客户类别",
                                width: 100,
                                editable: true,
                                editMode: 'select',
                                data: CustomDict.customertype
                            },
                            {field: "accounts", title: '结算方'},
                            {field: "shipper", title: '承运方'},
                            {field: "zip", title: '邮编'},
                            {field: "contact", title: '联系人'},
                            {field: "telephone", title: '电话'},
                            {field: "is_enable", title: '是否启用', formatter: (v) => (_.trim(v) === '1' ? '启用' : '不启用')},
                            {field: "remark", title: '备注'},
                            {field: "create_by", title: '创建者'},
                            {field: "create_at", title: '建立时间', formatter: 'fmtDate', editable: true, editMode: 'date'},
                            {field: "update_by", title: '修改者'},
                            {field: "update_at", title: '更新时间', formatter: 'fmtDate', editable: true, editMode: 'date'},
                        ],
                        autoDataSource: true,
                        dataSource: {
                            func: CustomService.selectAll
                        }
                    }
                ]
            }
        ]
    })
}